<template>
    <div class="rule-tabs">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="getAddRulesData">
            <el-tab-pane
                v-for="(item, index) in tableList"
                :key="item.sort"
                class="tab-item-box"
                :label="item.name"
                :name="index + ''">
                <el-scrollbar max-height="300px">
                    <div v-if="activeName == index" class="tab-item">
                        <div v-if="item.ruleList && item.ruleList.length">
                            <div v-for="(itm, indx) in item.ruleList" :key="itm" class="content-box">
                                <div v-if="indx <= item.ruleList.length - 2" class="desc-stepBox">
                                    <div class="word">或</div>
                                    <div class="line"></div>
                                </div>
                                <span>规则{{ itm.step }}:</span>
                                <div class="desc-content">
                                    <div v-for="(it, ind) in itm.list" :key="it" class="item">
                                        <div v-if="ind <= itm.list.length - 2" class="stepBox">
                                            <div class="word">且</div>
                                            <div class="line"></div>
                                        </div>
                                        <span>{{ it.desc }}</span>

                                        <span
                                            v-if="it.classify == 1 && it.cust_rule_type != 7"
                                            style="margin-left: 10px"
                                            >为 {{ it.action_type == 1 ? '添加员工' : '删除员工' }}</span
                                        >
                                        <span
                                            v-if="it.classify == 1 && it.cust_rule_type == 7"
                                            style="margin-left: 10px"
                                            >为 {{ it.action_type == 1 ? '未绑定' : '已绑定' }}</span
                                        >
                                        <span v-if="it.classify == 2" style="margin-left: 10px"
                                            >为 {{ it.operator_typeName }} {{ it.num || 0 }}个</span
                                        >
                                        <span v-if="it.classify == 6" style="margin-left: 10px"
                                            >为 {{ it.operator_typeName }} {{ it.num / 100 || 0 }}元</span
                                        >
                                        <span v-if="it.classify == 5" style="margin-left: 10px"
                                            >为 {{ it.operator_typeName }} {{ it.num || 0 }}秒</span
                                        >
                                        <span v-if="it.classify == 3" style="margin-left: 10px"
                                            >包含
                                            <div v-for="itc in it.cust_stage" :key="itc.id" class="tag-item">
                                                {{ itc.name }}
                                            </div></span
                                        >
                                        <span
                                            v-if="it.classify == 4 && it.cust_rule_type != 6"
                                            style="margin-left: 10px"
                                            >{{
                                                it.cust_tag_type == 3
                                                    ? '无标签'
                                                    : it.cust_tag_type == 1
                                                    ? '满足所有标签'
                                                    : '满足任意一个标签'
                                            }}
                                            <div v-for="itc in it.cast_tag" :key="itc.id" class="tag-item">
                                                {{ itc.name }}
                                            </div></span
                                        >
                                        <span
                                            v-if="it.classify == 4 && it.cust_rule_type == 6"
                                            style="margin-left: 10px"
                                            >满足
                                            <div v-for="itc in it.cust_source" :key="itc.id" class="tag-item">
                                                {{ itc.name }}
                                            </div>
                                            中任意一个
                                        </span>
                                    </div>
                                </div>
                                <img src="@/assets/customer/del-icon.png" alt="" @click="delFun(itm.step)" />
                                <img src="@/assets/customer/edit-icon.png" alt="" @click="showAddRuleBox(itm)" />
                            </div>
                        </div>
                        <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
        </el-tabs>
        <el-button class="addBtn" @click="showAddRuleBox()"> 添加规则 </el-button>
    </div>
    <AddRules
        ref="AddRulesRef"
        :stage_id="tableList[activeName].id || ''"
        :table-list="props.tableList"
        @save="getAddRulesData" />
</template>

<script lang="ts" setup>
import AddRules from './AddRules.vue';
import { ref, reactive } from 'vue';
const activeName = ref('0');
const props = defineProps(['tableList']);
// eslint-disable-next-line vue/no-dupe-keys
const tableList = ref([]);
import { ElMessage, ElMessageBox } from 'element-plus';
import { ruleGroupDel, ruleGroupList } from '../../api';
tableList.value = JSON.parse(JSON.stringify(props.tableList));
const AddRulesRef = ref(null);
// 删除
const delFun = (step_rule: any) => {
    ElMessageBox.confirm('是否确认删除？', '删除提醒', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        if (!step_rule) {
            ElMessage.error('当前数据异常，请稍后再试');
            return;
        }
        ruleGroupDel({ stage_id: tableList.value[activeName.value].id, step_rule }).then((r: any) => {
            ElMessage.success('删除成功');
            getAddRulesData();
        });
    });
};
// 显示添加规则
const showAddRuleBox = (val: any) => {
    if (val) {
        AddRulesRef.value.appDialog.editInfo = val;
    } else {
        AddRulesRef.value.appDialog.editInfo = {};
    }
    AddRulesRef.value.appDialog.visible = true;
};

const numRuleArr = [
    { label: '大于', value: 1 },
    { label: '等于', value: 2 },
    { label: '大于等于', value: 3 },
    { label: '小于', value: 4 },
    { label: '小于等于', value: 5 }
];
const tabIndexid = ref(0);
// 获取当前阶段的规则
const getAddRulesData = (val: any) => {
    tabIndexid.value = tableList.value[activeName.value].id;
    ruleGroupList({ stage_id: tableList.value[activeName.value].id }).then((r: any) => {
        r = r || [];
        r.forEach((item: any) => {
            if (item.list) {
                item.list.forEach((it: any) => {
                    if (it.classify == 2 || it.classify == 5 || it.classify == 6) {
                        const indx = numRuleArr.findIndex((va: any) => {
                            return va.value == it.operator_type;
                        });
                        it.operator_typeName = indx > -1 ? numRuleArr[indx].label : '';
                    }
                });
            }
        });
        tableList.value[activeName.value].ruleList = r || [];
    });
};
getAddRulesData();
defineExpose({ getAddRulesData, tabIndexid }); //像父组件抛出方法
</script>

<style lang="scss" scoped>
.demo-tabs {
    height: 400px;
    border: 1px solid #eaeaea;

    .tab-item-box {
        position: relative;
        padding: 24px 0 0;

        .tab-item {
            // height: 340px;
            // overflow-y: auto;
        }

        .content-box {
            padding-left: 47px;
            position: relative;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 24px;

            .desc-stepBox {
                position: absolute;
                font-size: 14px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #ff6b00;
                top: 0;
                left: 21px;
                height: calc(100% + 36px);
                display: flex;
                align-items: center;

                .word {
                    padding: 5px 0;
                    background: white;
                    position: relative;
                    z-index: 2;
                }

                .line {
                    position: absolute;
                    width: 1px;
                    border-left: dashed 1px #ffc69e;
                    height: calc(100% - 32px);
                    left: 6px;
                    top: 18px;
                    z-index: 1;
                }

                &::after,
                &::before {
                    box-sizing: border-box;
                    position: absolute;
                    content: '';
                    left: 2px;
                    width: 8px;
                    height: 8px;
                    background: #fff;
                    border: 2px solid #ff6b00;
                    border-radius: 50%;
                }

                &::before {
                    top: 4px;
                }

                &::after {
                    bottom: 0;
                }
            }

            & > span {
                font-size: 14px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #33302d;
                margin-right: 10px;
            }

            .desc-content {
                width: 600px;
                background: #f9f9f9;
                border: 1px solid #eaeaea;
                padding: 16px 0;

                .tag-item {
                    display: inline-block;
                    background: #fff;
                    border: 1px solid #ff6b00;
                    font-size: 14px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #ff6b00;
                    line-height: 22px;
                    padding: 0 10px;
                    margin-right: 6px;
                    margin-bottom: 5px;
                }

                .item {
                    padding-left: 46px;
                    padding-bottom: 48px;
                    position: relative;

                    &:last-child {
                        padding-bottom: 0;
                    }

                    .stepBox {
                        position: absolute;
                        font-size: 14px;
                        font-family: STHeitiSC-Medium, STHeitiSC;
                        font-weight: 500;
                        color: #ff6b00;
                        left: 16px;
                        top: 0;
                        display: flex;
                        height: calc(100% + 14px);
                        align-items: center;

                        .word {
                            padding: 4px 0;
                            background: white;
                            position: relative;
                            z-index: 2;
                        }

                        &::after,
                        &::before {
                            box-sizing: border-box;
                            position: absolute;
                            content: '';
                            left: 2px;
                            width: 8px;
                            height: 8px;
                            background: #fff;
                            border: 2px solid #ff6b00;
                            border-radius: 50%;
                        }

                        &::before {
                            top: 6px;
                        }

                        &::after {
                            bottom: 0;
                        }

                        .line {
                            position: absolute;
                            width: 1px;
                            border-left: dashed 1px #ffc69e;
                            height: calc(100% - 32px);
                            left: 6px;
                            top: 18px;
                            z-index: 1;
                        }
                    }
                }
            }

            img {
                cursor: pointer;
                width: 18px;
                height: 18px;
                margin-left: 14px;
            }
        }
    }
}

.rule-tabs {
    position: relative;
}

.demo-tabs {
    :deep(.el-tabs__item) {
        height: auto;
        line-height: normal;
        font-size: 14px;
        padding: 20px !important;
    }

    :deep(.el-tabs__nav-scroll) {
        margin-right: 120px;
    }

    :deep(.el-tabs__nav-next),
    :deep(.el-tabs__nav-prev) {
        line-height: 60px;
    }

    .addBtn {
        position: absolute;
        right: 24px;
        top: 12px;
    }
}
</style>
